<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<style type="text/css">
			/* #app{
				color: white;
			} */
			.box1{
				width: 400px;
				height: 400px;
				background-color: blue;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			.redColor{
				color: red;
			}
			.sizeJia{
				font-size: 20px;
				font-weight: bolder;
			}
			.bgc{
				background-color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="app">
			{{num+1>1?"大于1":"小于1"}}
			<span :class="{redColor:!false,sizeJia:true}">redColor</span>
			<br>
			<span :class="['redColor','sizeJia',bgc]">redColor</span>
			<br>
			<span :class="!true?'redColor':'sizeJia'">redColor</span>
			<!-- <div class="box1" @click="openAlt1()">
				<div class="box2"  @click.stop="openAlt2()">
					box2
				</div>
				box1
			</div>
			<input type="text" @keyup.a="fun_f1"> -->
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				bgc:"bgc",
				num:1
			},
			methods:{
				openAlt1(){
					alert("box1")
				},
				openAlt2(){
					alert("box2")
				},
				sub(){
					console.log("提交表单数据")
				},
				fun_f1(){
					console.log("fun_f1")
				}
			}
		})
		vm.config.keyCodes.a = 65
	</script>
</html>
